{#<html>#}
{#<body>#}
{#<form action="/facebook/fb_site_login" method="post">#}
{#    {% csrf_token %}#}
{#    <label for="loginBtn">Press to go to FaceBook login site</label>#}
{#    <input type="submit" id="loginBtn" value="GO" />#}
{#</form>#}
{##}
{#</body>#}
{#</html>#}

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
    <title>
        Friends Map with Facebook
    </title>
</head>
<body style="text-align: center;">

<div id="fb-root"></div>
<h2>Press to log into Facebook</h2><br/>

<div id="user-info"></div>
<style type="text/css">
   .fb_button {
        background-color: #3b5998;
        border-color: #d8dfea rgb(14, 31, 91) rgb(14, 31, 91) rgb(216, 223, 234);
        border-style: solid;
        border-width: 1px;
        color: #fff;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        font-size: 12px;
        margin: 0 2px;
        padding: 2px 18px;
}
</style>

<input type="button" id="fb-auth" value="Log-in" class="fb_button" />
<br><br><br>
<i>* please note that you log into oficial Facebook site and your username and password are not revealed to our application</i>
<script src="/static/jQuery.js"></script>
<script>
    window.fbAsyncInit = function() {

        FB.init({ appId: '{{ appId }}',
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true});

        function updateButton(response) {

            var button = document.getElementById('fb-auth');

            if (response.authResponse) {
                //user is already logged in and connected
                var userInfo = document.getElementById('user-info');
                FB.api('/me', function(response) {
                    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
                    button.innerHTML = 'Logout';
                });
                button.onclick = function() {
                    FB.logout(function(response) {
                        var userInfo = document.getElementById('user-info');
                        userInfo.innerHTML = "";
                    });
                };
                redirectWithAccessToken(response)
            } else {
                //user is not connected to your app or logged out
                button.innerHTML = 'Login';
                button.onclick = function() {
                    FB.login(function(response) {
                        if (response.authResponse) {
                            FB.api('/me', function(response) {
                                var userInfo = document.getElementById('user-info');
                                userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name;
                            });
                            redirectWithAccessToken(response)
                        } else {
                            //user cancelled login or did not grant authorization
                        }
                    }, {scope:'{{ perms }}'});
                }
            }
        }

        function redirectWithAccessToken(response) {

            var myForm = document.createElement("form");
            myForm.method="post" ;
            myForm.action = "/facebook/fb_site_login" ;

            var myInput = document.createElement("input") ;
            myInput.setAttribute("type", "text") ;
            myInput.setAttribute("name", "userID") ;
            myInput.setAttribute("id", "userID") ;
            myInput.setAttribute("value",response.authResponse.userID);
            myForm.appendChild(myInput) ;

            var myInput2 = document.createElement("input") ;
            myInput2.setAttribute("type", "text") ;
            myInput2.setAttribute("name", "accessToken") ;
            myInput2.setAttribute("id", "accessToken") ;
            myInput2.setAttribute("value",response.authResponse.accessToken);
            myForm.appendChild(myInput2) ;

            var myInput3 = document.createElement("input") ;
            myInput3.setAttribute("type", "text") ;
            myInput3.setAttribute("name", "csrfmiddlewaretoken") ;
            myInput3.setAttribute("value",getCookie('csrftoken'));
            myForm.appendChild(myInput3) ;

            document.body.appendChild(myForm) ;
            myForm.submit() ;
            document.body.removeChild(myForm) ;
        }

        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // run once with current status and whenever the status changes
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.statusChange', updateButton);
    };

    (function() {
        var e = document.createElement('script');
        e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());

</script>
{% csrf_token %}
</body>
</html>